<!-- http://www.heix.cn/tpl/static/vrplayer/vrplayer.html?video_url=/uploads2/vr/vr_3_20160704001.mp4 -->
<!DOCTYPE html>
<html>

<head>
  <title>VR播放器</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="telephone=no" name="format-detection">
  <meta content="email=no" name="format-detection">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <link type="image/x-icon" rel="shortcut icon" href="https://avatars3.githubusercontent.com/u/4074517?v=3&s=40" />
  <style>
    @-ms-viewport {
      width: device-width;
    }

    @media only screen and (min-device-width:800px) {
      html {
        overflow: hidden;
      }
    }

    html {
      height: 100%;
    }

    body {
      height: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
      color: #FFFFFF;
      background-color: #000000;
    }

    a {
      color: #FFFFFF;
    }

    #open-new-window {
      position: absolute;
      top: 5px;
      right: 5px;
      z-index: 3001;
      overflow: visible;
      opacity: 1;
      cursor: pointer;
      pointer-events: auto;
      width: 32px;
      height: 32px;
      background-image: url("vtourskin.png");
      background-size: 64px 384px;
      background-position: 0px -288px;
      display: none;
    }
  </style>
</head>

<body>
  <div id="pano" style="width:100%;height:100%;">
    <noscript>
      <table style="width:100%;height:100%;">
        <tr style="vertical-align:middle;text-align:center;">
          <td>ERROR:
            <br>
            <br>Javascript not activated
            <br>
            <br>
          </td>
        </tr>
      </table>
    </noscript>
  </div>

</body>
<script data-framework="data-framework" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="krpano.js"></script>
<script>
  ;
  (function() {
    var getQueryString = function(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        if (name.indexOf("title") > -1 || name.indexOf("desc") > -1) {
          return decodeURIComponent(r[2]);
        } else {
          return unescape(r[2]);
        }
      } else {
        return null;
      }
    }

    var checkSys = function() {
      var ua = navigator.userAgent.toLowerCase(),
        isAndroid = ua.indexOf('android') > 0 ? true : false,
        isChrome = ua.indexOf('chrome') > 0 ? true : false,
        isFirefox = ua.match(/firefox/) ? true : false,
        isWechat = ua.indexOf('micromessenger') > 0 ? true : false,
        isIphone = ua.indexOf('iphone') > 0 ? true : false;

      return {
        isAndroid: isAndroid,
        isFirefox: isFirefox,
        isChrome: isChrome,
        isWechat: isWechat,
        isIphone: isIphone
      }
    }

    var panoInit = function() {
      var url = getQueryString('video_url'),
        index = url.lastIndexOf('/'),
        path = url.substring(0, index + 1),
        fileName = url.substring(index + 1, url.length).replace('.mp4', ''),
        system = checkSys();

      if (system.isAndroid) {
        if (!system.isWechat) {
          if (system.isChrome || system.isFirefox) {

          } else {
            alert('请在Chrome浏览器打开观看视频');
            return;
          }
        } else {
          alert('请在Chrome浏览器打开观看视频');
          return;
        }
      } else if (system.isIphone) {
        $('#open-new-window').show();
      }

      embedpano({
        xml: "video.xml",
        target: "pano",
        html5: "prefer",
        passQueryParameters: true,
        initvars: {
          path: path,
          filename: fileName
        }
      });
    }

    panoInit();
  })();
</script>

</html>
